<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>118，我给母校发红包</title>
    <link rel="stylesheet" href="/static/css/frozen.css" th:src="@{/static/css/frozen.css}"/>
    <link rel="stylesheet" href="/static/css/pkuniversity.css" th:src="@{/static/css/pkuniversity.css}"/>
    <script src="/static/js/jquery-1.12.1.min.js" th:src="@{/static/js/jquery-1.12.1.min.js}"/>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<section >
    <div class="main">
        <div class="logo">
            <img src="../static/img/logo1.png" th:src="@{/static/img/logo1.png}"/>
        </div>
        <ul class="ui-row op">
            <li class="ui-col ui-col-50 " th:if="${user.type} eq -1">
                <label><input type="radio"  name="userType" checked="checked" value="0" class="userType" />校友</label>
            </li>
            <li class="ui-col ui-col-50" th:if="${user.type} eq -1">
                <label><input type="radio"  name="userType" value="1" class="userType" />北大之友</label>
            </li>
            <li class="ui-col ui-col-50 " th:if="${user.type} eq 0">
                <label><input type="radio"  name="userType" checked="checked" readonly="true" value="0" class="userType" />校友</label>
            </li>
            <li class="ui-col ui-col-50" th:if="${user.type} eq 1">
                <label><input type="radio"  name="userType" value="0" readonly="true"  class="userType" />校友</label>
            </li>
            <li class="ui-col ui-col-50" th:if="${user.type} eq 0">
                <label><input type="radio"  name="userType" value="1" readonly="true"  class="userType" />北大之友</label>
            </li>
            <li class="ui-col ui-col-50" th:if="${user.type} eq 1">
                <label><input type="radio"  name="userType" value="1" readonly="true" checked="checked" class="userType" />北大之友</label>
            </li>
        </ul>
    </div>
    <div class="bgf redcard-money size30">
        <div class="money-tips width90 margin0auto">
            我要发
            <ul class="ui-tiled">
                <li><div class="active uNum">10个</div></li>
                <li><div class="uNum">20个</div></li>
                <li><div class="uNum">100个</div></li>
            </ul>
            <p class="tag clear">*每个红包1.18元</p>
            <div class="write-money">
                <div class="even">
                    自定义
                    <div class="write-inp"><input class="definedNum" type="tel"  placeholder="请输入" /> 个</div>
                </div>
                <p class="clear money-count">合计 <span class="bth9b uPay">11.80</span> 元</p>
                <p class="tag clear">红包里的每一分钱都将注入北京大学校友基金</p>
            </div>
        </div>
    </div>
    <div class="bgf">
        <div class="width90 margin0auto even" th:if="${user.realName} eq '' or ${user.realName} eq null">
            <span class="bth9b">*</span>姓名<div class="write-inp"><input type="text" class="uName" placeholder="请输入姓名" /></div>
        </div>
        <div class="width90 margin0auto even" th:unless="${user.realName} eq '' or ${user.realName} eq null">
            <span class="bth9b">*</span>姓名<div class="write-inp"><input type="text" class="uName" placeholder="请输入姓名" th:value="${user.realName}" readonly="true"/></div>
        </div>
    </div>
    <div class="bgf">
        <div class="width90 margin0auto">
            <h3 class="ui-border-b" th:text="${call.name}+'的召集令'">的召集令</h3>
            <div class="pku-progress">
                <div class="ui-progress">
                    <span  th:attr="style='width:'+${progress}+'%'"></span>
                </div>
                <span th:text="${progress}+'%'">0%</span>
            </div>
            <ul class="ui-tiled pku-border-b">
                <li class="ui-border-r"><div>参与人数</div><i><span class="bth9b person" th:text="${call.joinUserNum}">0</span>人</i></li>
                <li class="ui-border-r"><div>已召集红包</div><i><span class="bth9b getrb" th:text="${call.giftCount}">0</span>个</i></li>
                <li class="ui-border-r"><div>目标</div><i><span class="bth9b target" th:if="0 >= ${call.giftBid}">0</span><span class="bth9b target" th:if="${call.giftBid} > 0" th:text="${call.giftBid} ">0</span>个</i></li>
            </ul>
            <a href="#" th:href="'/peking/gift-call/'+ ${gcId} +'/top10'"><div class="se-btn">查看召集令排行</div></a>
        </div>
    </div>


    <div class="bgf">
        <div class="width90 margin0auto">
            <h3 class="ui-border-b" >还有谁发了红包</h3>
               <table id="items" style="width: 100%">
                   <tbody>

                   </tbody>
               </table>
            <div class="textcenter" >点击加载更多</div>
        </div>
    </div>

    <div class="width90 margin0auto">
        <div style="margin:2rem auto">
            <div class="btnl">邀请好友</div>
            <div class="btnr" id="fhb">发红包</div>
        </div>
        <input type="hidden" name="callId" id="uOrder" th:value="${gcId}"/>
    </div>
    <!-- 分享 -->
    <div id="share-float"  style="display:none;">
        <div class="container">
            <div class="share-doc">
                <img src="/static/img/fx.png" th:src="@{/static/img/fx.png}" />
            </div>
        </div>
    </div>
    <!--  分享 end -->
    <script>
        $(function(){
            $(".btnl").on("click",function(){
                $("#share-float").show();
            });

            $("#share-float").bind("click", function (e) {
                var $dom = $(e.srcElement || e.target) ;
                if(!$dom.closest(".container").length){
                    $("#share-float").hide()
                }
            });
        })
    </script>
    <script type="text/javascript" src="js/lib/zeptojs/zepto.min.js" th:src="@{/static/js/lib/zeptojs/zepto.min.js}"></script>

    <script>
        var page =1,pageSize=1;
        var callId = /*[[${gcId]]*/'';
        $(function(){
            ajaxData();
            $(".textcenter").on("click",function(){
                ajaxData();
            })
        })
        function ajaxData(){
            callId = $("#uOrder").val();
            var url = "/peking/gift-call/"+callId+"/members?page="+page;
            $.ajax({
                type:"GET",
                url: url,
                success:function(data){
                    var _d = data.result;
                    if(_d==null||_d==""){
                        $(".textcenter").hide();
                    }else {
                        $(".rank").text(_d.rank);
                        var _items="";
                        for(var i = 0; _d.length >i;i++){
                            _items+='<tr><td style="width:50%;text-align: left;text-indent: 1rem;padding:0.5rem">'+_d[i].name+'</td><td style="width:49%;text-align: right;padding: 0.5rem">'+_d[i].giftCount+'个</td></tr>';
                        }
                        $("#items").find("tbody").append($(_items));
                        page++;
                    }
                },
                error:function(a,b,c){
                    console.log(a);
                }
            })
        }
    </script>

    <script>
        $(function(){
            var $fhb = $("#fhb"), //发红包按钮
                    $definedNum = $(".definedNum"), //自定义个数
                    $uNum = $(".uNum"), //所选择的几个红包
                    $uPay = $(".uPay"), //合计
                    $uName = $(".uName"),//姓名
                    $uOrder = $("#uOrder"),//姓名
                    uMoney = 1.18; //每个红包1。18元
            $uNum.on("click",function(){
                $uNum.removeClass("active");
                $(this).addClass("active");
                var _v = parseInt($(this).text()).toFixed(0);
                $uPay.text((_v * uMoney).toFixed(2));
                $definedNum.val("")
            })
            $definedNum.on("keyup",function(){
                var _v = parseInt($(this).val());
                if(_v>0){
                    $uNum.removeClass("active");
                    $(this).val(_v);
                    $uPay.text(_v * uMoney);
                }else{

                }
            }).on("blur",function(){
                if(0 >= $(this).val()){
                    $(this).val(1);
                }
            })
            $fhb.on("click",function(){
                var _uType = parseInt($(".userType:checked").val());
                var _uNum = parseInt(parseFloat($uPay.text()) / uMoney);
                var _uName = $uName.val();
                var _uOrder= parseInt($uOrder.val());
                var data = {'uType':_uType,'type':1,'share':_uNum,'realName':_uName,'amount':uMoney,'callId':_uOrder};
                if(_uName != ""){
                    $.ajax({
                        url:"/peking/pay",
                        type:"POST",
                        contentType: 'application/json',
                        data:JSON.stringify(data),
                        success:function(res){
                            window.location.href = "/peking/prepay/wx/js?transactionId="+res.result.transactionId;
                        },
                        error:function(res){
                            alert("支付失败"+res.message);
                        }
                    })
                }else{
                    alert("请输入姓名")
                }

            })
        })
    </script>



    <script th:inline="javascript">

        $(".textcenter").on("click",function () {
            $(".moreorder").show();
            $(".textcenter").hide();
        });

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', wxfx, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', wxfx);
                document.attachEvent('onWeixinJSBridgeReady', wxfx);
            }
        } else {
            wxfx();
        }


        var shareapp_data = {};
        var sharetimeline_data = {};
        var nick = /*[[${user.realName}]]*/'';
        var call = /*[[${call.name}]]*/'';

        function wxfx(){
            wx.config({
                debug: false,
                appId: /*[[${wx_config_wxAppId}]]*/'',
                timestamp: /*[[${wx_config_timeStamp}]]*/'',
                nonceStr: /*[[${wx_config_nonceStr}]]*/'',
                signature: /*[[${wx_config_signature}]]*/'',
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo'
                ]
            });
            var title="";
            if(nick==null|| nick =="null" ||nick == ""){
                title = "我";
            }else{
                title = '我是【' + nick+ '】';
            }

                shareapp_data = {
                    title: title + '发起了【' + call + '】召集令，喊你一起给母校发红包！',
                    desc: '北京大学118周年校庆活动',
                    link: 'http://'+ /*[[${globalHostName}+'/peking/gift-call/'+${gcId}+'/gift']]*/'' + '/peking/gift-call/' + callId + '/gift',
                    imgUrl:'http://'+ /*[[${globalHostName}+'/static/img/pku.jpg']]*/''
                };
                sharetimeline_data = {
                    title: title + '发起了【' + call + '】召集令，喊你一起给母校发红包！',
                    desc: '北京大学118周年校庆活动',
                    link: 'http://'+ /*[[${globalHostName}+'/peking/gift-call/'+${gcId}+'/gift']]*/'',
                    imgUrl: 'http://'+ /*[[${globalHostName}+'/static/img/pku.jpg']]*/''
                }
                wx.onMenuShareAppMessage(shareapp_data);
                wx.onMenuShareTimeline(sharetimeline_data);

        }
    </script>

</section>
</body>
</html>